<template>
  <div class="page">
    <div class="header">
      <img :src="user.headImage" />
      <div class="text">
        <div class="name">职位：{{position.position}}</div>
        <div class="name" style="margin:8px 0">昵称：{{user.nickName}}</div>
        <div class="name">公司：{{item.belongToCompany}}</div>
      </div>
    </div>
    <div class="navs">
      <van-cell title="我的推广订单" icon="description" to="/over" is-link />
    </div>
    <van-panel title="推广员推广商品" desc="商户修改绩效金额时，绩效会实时变化，请注意查看">
      <goods v-for="(item, index) in list" :key="index" :item="item">
        <div slot="btn" @click.stop class="flex-row">
          <div class="jixiao">推广绩效：{{item.price[0].income}}元</div>
          <van-button type="primary" size="small" @click="send(item.productID)">推广</van-button>
        </div>
      </goods>
    </van-panel>
<!--    <van-dialog-->
<!--            v-model="show"-->
<!--            title="推广二维码"-->
<!--            show-cancel-button-->
<!--    >-->
<!--      <img :src="ewm.extensionChart">-->
<!--    </van-dialog>-->

  </div>
</template>

<script>
import Goods from '@/components/Goods3.vue'
import { getProductList, getDistributedProduct, getQrPoster , getDistributorDetail,mine,position } from '@/api'

export default {
  name: 'send',
  components: {
    Goods
  },
  data() {
    return {
      id: '',
      show: false,
      item:{},
      user:{},
      ewm:{},
      position:{},
      list: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getProductList().then(res => {
        this.list = res.productList
        console.log(res.productList)
      });
      this.id = localStorage.getItem('userID')
      getDistributorDetail(this.id).then(res => {
        this.item = res
        console.log(res)
        position(this.item.positionID).then(res => {
          console.log(res);
          this.position = res
        })
      });
      mine({userId:this.id}).then(res => {
        console.log(res);
        this.user = res
      })

    },
    send(id) {
      // getDistributedProduct({
      //   productID: id,
      //   distributorID: localStorage.getItem('userID')
      // }).then(res => {
      //   console.log(res)
      // })
      getQrPoster({
          productID: id,
          url: 'http://localhost:8080/ylyw-mobile/#/t-goods-detail?' + 'productId=' + id + '&distributorID=' + localStorage.getItem('userID'),
          // distributorID: localStorage.getItem('userID')
        }).then(res => {
          // this.show = true
          res.extensionChart = 'data:img/jpg;base64,' + res.extensionChart
          this.ewm = res
          this.ewm.url = 'http://localhost:8080/ylyw-mobile/#/t-goods-detail?' + 'productId=' + id + '&distributorID=' + localStorage.getItem('userID')
          this.$router.push({
            path: `/share`,
            query: {
              ewm:this.ewm
            }
          })
          // console.log(res)
        })
    },
    link(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin'
.header
  padding 20px 15px
  display flex
  align-items center
  background #ffffff
  font-size 14px
  img 
    display block
    width 18vw
    height 18vw
    margin-right 15px
.navs,.van-panel
  margin-top $part-width
</style>
